<template>
  <div class="nextthanks">
    <vheader pageTitle="预计待发放答谢时间"></vheader>
    <div class="nextthanks-top" id="js_top">
      <span>好友 · 预计答谢时间</span>
      <span>奖励总额(元)</span>
      <span>备注</span>
    </div>
    <div class="nextthanks-list" v-scroll="onScroll">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="5">
        <li class="border-1px" v-for="item in dataList">
          <span>{{ item.emRealNmae }} {{ item.emLoginName }} {{ item.deadLine }}</span>
          <span>{{ item.amount.toFixed(2) }}</span>
          <span>出借答谢</span>
        </li>
      </ul>
      
      <list-loading
        :allLoaded="allLoaded" v-show="!noData"></list-loading>
        <no-data v-show="noData"></no-data>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import listLoading from 'components/common/listLoading'
  import noData from 'components/common/noData'

  export default {
    data () {
      return {
        pageSize: 10,
        loading: false,
        pageOffset: 1,
        totalPage: 1,
        allLoaded: false,
        dataList: [],
        noData: false
      }
    },
    methods: {
      loadMore () {
        if (this.allLoaded) {
          return
        }
        this.loading = true
        const userAcctKey = this.getUserCookie('acctKey')
        this.$http.get(`/api/member/memberInviteAward/inviteAwarListDetail?acctKey=${userAcctKey}&status=0&currentPage=${this.pageOffset}&numPerPage=${this.pageSize}`)
          .then((res) => {
            if (res.data.success) {
              res.data.data.list.forEach((item) => {
                this.dataList.push(item)
              })
              console.log(res.data.data)
              this.loading = false
              this.totalPage = res.data.data.totalPage
              console.log(this.pageOffset, this.totalPage)
              if (this.pageOffset === this.totalPage || this.totalPage === 0) {
                this.allLoaded = true
                return
              }
              this.pageOffset++
            } else {
              // 没有数据
              console.log('没有数据')
              this.allLoaded = true
              this.noData = true
            }
          })
      },
      onScroll (e, position) {
        const topEle = document.getElementById('js_top')
        if (position.scrollTop === 0) {
          topEle.classList.remove('active')
        }
        if (position.scrollTop > 0) {
          topEle.classList.add('active')
        }
      }
    },
    filters: {
      format (status) {
        switch (status) {
          case 'RECHARGE_SUCC':
            return '充值成功'
          case 'RECHARGING':
            return '充值成功'
          case 'RECHARGE_FAIL':
            return '充值失败'
          default:
            break
        }
      }
    },
    components: {
      vheader,
      listLoading,
      noData
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .nextthanks {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    &-top {
      flex: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 108px;
      padding: 0 30px;
      background: $base-fff;
      &.active {
        box-shadow: 0 2px 3px 1px #e3e3e3;
      }
      span {
        font-size: 30px;
        text-align: right;
        color: $base-999;
      }
      &>span:nth-child(1) {
        text-align: left;
        width: 40%;
      }
      &>span:nth-child(2) {
        width: 30%;
      }
      &>span:nth-child(3) {
        width: 22%;
      }
    }
    &-list {
      overflow: auto;
      -webkit-overflow-scrolling : touch;
      ul {
        li {
          height: 108px;
          margin: 0 30px;
          @include border-1px(#{$base-e5e5e5});
          font-size: 26px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $base-666;
          text-align: right;
          &>span:nth-child(1) {
            text-align: left;
            width: 40%;
            line-height: 40px;
          }
          &>span:nth-child(2) {
            width: 30%;
          }
          &>span:nth-child(3) {
            width: 22%;
          }
        }
      }   
    }
  }
</style>
